<template>
    <div class="container">
        <!-- 商品列表 -->
        <el-main>
            <el-row>
                <el-col :span="6" v-for="product in products" :key="product.id">
                    <el-card class="product-card">
                        <img :src="product.itemImg" class="product-image" alt="product.name">
                        <div class="product-info">
                            <span class="product-name">{{ product.itemName }}</span>
                            <span class="product-price">￥{{ product.price }}</span>
                        </div>
                        <div class="product-actions">
                            <el-button @click="decreaseQuantity(product)" size="small">-</el-button>
                            <span>{{ product.quantity }}</span>
                            <el-button @click="increaseQuantity(product)" size="small">+</el-button>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>

        <!-- 底部总计 -->
        <el-footer class="footer">
            <span>总数量: {{ totalQuantity }}</span>
            <span style="margin-left: 320px">总价格: ￥{{ totalPrice }}</span>
            <el-button type="primary" @click="saveOrder" style="margin-left: 700px">提交订单</el-button>
            <el-button type="success" @click="pay" style="margin-left: 20px">前往支付</el-button>
        </el-footer>

    </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import {getItemListByItemId} from "@/api/item";
import {useRoute} from "vue-router";
import {getItemByShopId} from "@/api/shop";
import {createOrder} from "@/api/order";
import {ElMessage} from "element-plus";
import {createLineItem} from "@/api/item";
import {findCustomerOrder} from "@/api/order";
import router from "@/router";


const products = ref([]);
const itemIds=ref([])
const totalQuantity = ref(0);
const totalPrice = ref(0);
const route=useRoute()

const shopId=ref("")
const order=ref({})
onMounted(async () => {
    shopId.value=route.query.shopId
    let result1=await getItemByShopId(shopId.value)
    itemIds.value=result1.data
    let result = await getItemListByItemId(itemIds.value)
    products.value = result.data.map(product => ({
        ...product,
        quantity: 0
    }));
})
const increaseQuantity = (product) => {
    product.quantity++;
    calculateTotal();
};

const decreaseQuantity = (product) => {
    if (product.quantity > 0) {
        product.quantity--;
        calculateTotal();
    }
};

const calculateTotal = () => {
    totalQuantity.value = products.value.reduce((acc, product) => acc + product.quantity, 0);
    totalPrice.value = products.value.reduce((acc, product) => acc + (product.price * product.quantity), 0);
};

async function saveOrder() {

    let result2=await findCustomerOrder(shopId.value)
    if(result2.data!==null&&result2.data.deleted!==1){
        ElMessage({
            type:"error",
            message:"您有存在的订单，请先前往支付"
        })
        return
    }

    order.value.shopId = shopId.value
    order.value.total = totalPrice.value
    let result = await createOrder(order.value)
    let orderId=result.data
    for (let i = 0; i < products.value.length; i++) {
        if(products.value[i].quantity>0){
            let lineItem={
                orderId:orderId,
                itemId:products.value[i].itemId,
                quantity:products.value[i].quantity
            }
            await createLineItem(lineItem)

        }
    }
    ElMessage({
        type:"success",
        message:"提交订单成功"
    })

}
async function pay() {
    let result = await findCustomerOrder(shopId.value)
    if (result.data.orderId == null) {
        ElMessage({
            type: "error",
            message: "您没有订单，请先下单"
        })
        return
    }
    await router.push({path: '/payment', query: {orderId: result.data.orderId}})
}
</script>

<style>
.container {
    padding: 20px;
}

.product-card {
    margin: 10px;
    position: relative;
}

.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.product-info {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.product-name {
    font-size: 18px;
}

.product-price {
    font-size: 16px;
}

.product-actions {
    position: absolute;
    bottom: 5px;
    right: 10px;
}

.footer {
    display: flex;
    padding: 5px;
}
</style>
